<template>
  <NewCard>
    <!-- 收藏里面的合同详情 -->
    <div class="temBox">
      <div class="temTitle">
        <svg-icon icon-class="return_icon" class="returnIcon" @click="returnBtn"/>
        <span>合同</span>
        <h3>{{contractListinfo? contractListinfo.name:contractListinfo.title }}</h3>
      </div>
      <div class="temSource">
        {{ contractListinfo&&contractListinfo.from }}·
        {{ contractListinfo&&contractListinfo.createTime }}
      </div>
      <div class="temContent"> 
        <div
          class="contentTxt"
          v-for="(item, index) in contractListinfo&&contractListinfo.info"
          :key="index"
        >
          <p v-html="item.replace(/\r/g,'</p><p>')"></p>
          <!-- <p>甲方：旅行社<br />负责人：___________________________</p>
          <p>乙方：<br />身份证：___________________________</p>
          <p>
            根据《中国人民共和国劳动法》和武汉市有关劳动管理办法，甲乙双方经平等协商同意。自愿签订本合同，共同遵守本合同所列各项条款。
          </p>
          <p>
            第一条本合同期限自年月日开始，至___年___月___日终止，其中试用期一个月。
          </p>
          <p>
            第二条
            乙方同意在甲方从事前台接待及旅游顾问工作，并保证与甲方保持劳动合同关系至少半年以上。
          </p>
          <p>
            第三条甲方每月20日支付乙方上月工资，每月基本工资___元，试用期间每月工资为______元
          </p>
          <p>
            第五条
            甲方安排乙方每日工作8小时，甲方保证乙方每周至少休息一日。乙方在法定假日（春节除外）照常工作，甲方应对乙方按每基本工资3倍予以补助。
          </p> -->
        </div>
        <div class="buyTem" v-if="!ifPurchase">
          <el-button round @click="changedemandShow">购买此模板</el-button>
          <p>剩余<span>85%</span>未读</p>
          <p>购买后可查看并编辑完整合同</p>
        </div>
      </div>

       <div class="temLabel">
        <el-button
          @click="anserlist(lab)"
          round
          v-for="(lab, index) in showlist"
          :key="index"
          >{{ lab }}
        </el-button>
        <div class="labelMoreclass">
          <!-- <el-button>更多 </el-button> -->
           <el-button
                size="mini"
                class="label_more"
                v-if="showlist.length >7"
                @click="labelMore"
                >{{ flagMore ? "更多" : "收起"
                }}<i :class="
                    flagMore == true
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-top'
                  "
                ></i
              ></el-button>
        </div>
      </div>
      <div class="ribbon_con">
        <Ribbon
          :detail="contractListinfo"
          :listActive="type"
        ></Ribbon>
      </div>
    </div>
  </NewCard>
</template>

<script>
import Ribbon from "@/components/Ribbon/ribbon.vue";
import NewCard from "@/wss/components/newCard.vue";
import { addDocHistoryApi } from "@/BMViews/api/doc/search.js";
import { getNowFormatDate } from "@/wss/utils/wss.js"
export default {
  name: "ContractDetail",
  //   "demandShow", "contractListinfo", "payinfo"
  props: {
    // 是否购买
    ifPurchase:{
      type:Boolean,
      default: true
    },
    demandShow: {},
    // 详情
    contractListinfo: {
      type: Object,

      default: () => {
        return {};
      },
      payinfo: {},
    },
  },
  components: { NewCard, Ribbon },
  data() {
    return {
      startTime: "", // 进入页面的时间戳
      currentTime: "", //切走文章时的离开的时间戳
      startData:'',//进入页面的时间2022-09-01 00:00:00
      list:[],
      flagMore:true,
      isFeat:true,
      type:"4",
      showlist: [], //标签默认展示
    };
  },
  mounted() {
    this.startTime = Date.now();//获取进入页面的时间戳
    this.startData = getNowFormatDate()//进入页面的时间2022-09-01 00:00:00

    this.$bus.$on("father", (e) => {
      // console.log(e,"eeeee")
    });
  },
    
  watch: {
    contractListinfo: {
      handler(val) {
        // 转换成收藏组件需要的参数
        // this.contractListinfo.goods.title = val.name;
          // this.contractListinfo.type="4"
           this.list=val.labels&&val.labels
           this.showlist = val.labels?val.labels.slice(0, 8):[];
        // 计算在文章内停留的时间
        // this.getArticleTime();
      },
      deep: true,
    },
  },
  methods: {
    // 返回
    returnBtn(){
      this.$bus.$emit('returnBtnShow',0)
    },

    anserlist() {
      // this.$router.push({path: '/Bm-Consult/finance', params:{data:3 } })
      this.$router.push({ path: "/Bm-search/searchAnswer" });
    },
    changedemandShow() {
      // console.log(this.demandShow,"demandShow")
      this.$emit("tofather",this.contractListinfo);
    },

    // // 计算在文章内停留的时间
    // async getArticleTime() {
    //   this.currentTime = Date.now();//切走文章时的时间
    //   //stayTime在此文章停留的时间
    //   let stayTime = this.currentTime - this.startTime;
    //   let data ={
    //     esId: this.currentDetail.id,
    //     esType: this.currentDetail.esType || this.listActive,
    //     nickname: this.$store.state.user.userInfo.nickName,
    //     startTime: this.startData,
    //     stayTime: stayTime/1000,
    //     title: this.currentDetail.title || this.currentDetail.name,
    //     userId: this.$store.state.user.userId,
    //   }
    //   await this.addDocHistory(data)
    //   //再次获取进入文章的时间
    //   this.startTime = Date.now();
    // },
    // // 添加浏览记录
    // async addDocHistory(data){
    //   let result = await addDocHistoryApi(data)
    //   if(result.code != 200) return
    // },

     labelMore() {
      const _this = this;
      const list = _this.list;
      let showlist = _this.showlist;
      // 是否是收起
      if (!_this.flagMore) {
        _this.showlist = list.slice(0, 10);
        _this.flagMore = !_this.flagMore;
        return;
      }
      // 当前长度
      let length = showlist.length;
      console.log(length,"lengthlengthlength");
      // 最大的长度
      let maxlength = list.length;
      console.log(maxlength,"123321");
      // list够6就加6
      if (length + 8 < maxlength) {
        _this.showlist = [...showlist, ...list.slice(length, length + 8)];

        // 不够到底，全部给，并且把更多改成收起
      } else {
        _this.flagMore = !_this.flagMore;
        _this.showlist = list;
      }
    },

  },
};
</script>

<style scoped>
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
::v-deep .top {
  display: none;
}
::v-deep .el-card__body > div {
  padding-top: 0 !important;
  height: 100%;
}
/* 模板标题 */
.temBox {
  padding: 15px 0;
  margin-bottom: 50px;
}
.temTitle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  padding: 0 30px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  padding-bottom: 10px;
}
.temTitle>svg{
  margin-right: 5px;
  cursor: pointer;
}
.temTitle > span {
  background-color: #747474;
  padding: 3px 14px;
  border-radius: 15px;
  color: #fff;
  margin-right: 16px;
}
.temTitle > h3 {
  /* font-weight: bold; */
  font-size: 20px;
}
/* 来源 */
.temSource {
  font-size: 12px;
  color: #999;
  padding: 20px 0;
  margin-top: 50px;
}
/* 合同模板内容 */
.temContent {
  position: relative;
  min-height: 300px;
  /* max-height: calc(100% - 115px); */
  /* height: 400px;
  
overflow: hidden;
white-space: nowrap; 
text-overflow: ellipsis;  */
}
.temContent .contentTxt p {
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 40px;
}
.temContent .buyTem {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    transparent,
    rgba(255, 255, 255, 0.8),
    #fff
  );
}
.temContent .buyTem .el-button {
  background-color: #39486f;
  color: #fff;
  border-color: #39486f;
  /* font-weight: bold; */
  padding: 10px 35px;
  margin-bottom: 15px;
}
.temContent .buyTem .el-button:hover {
  opacity: 0.9;
}
.temContent .buyTem p {
  font-size: 14px;
  color: #666;
  line-height: 22px;
}
.temContent .buyTem p > span {
  color: #f87a23;
}

/* 标签 */
.temLabel {
  width: 100%;
  margin-top: 50px;
}
.temLabel .labelMoreclass {
  text-align: center;
  margin: 0 auto;
}
.temLabel .labelMoreclass .el-button {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
}

.temLabel .el-button {
  width: 10%;
  padding: 10px 0;
  margin: 5px;
  color: #999;
  font-size: 12px;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  text-align: center;
}
.temLabel .el-button + .el-button {
  margin-left: 1.71%;
}
.temLabel .el-button:hover {
  border-color: #f87a23;
  color: #f87a23;
}
/* 底部分享 */
.ribbon_con {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 30px;
  background-color: #fff;
  border-top: 1px solid #ecedf0;
}
</style>